<template>
  <div>
    <p v-if="isMobileDevice">长按图片保存或分享，即可分享给好友啦！</p>
    <button class="btn" @click="saveImageLocally" v-if="!isMobileDevice">保存到本地</button>
    <div v-if="imgUrl" class="modal" style="position: absolute;top: 45px;left: 0;">
      <div class="modal-content"
        style="width: 95%;height: 60%;margin: 0 auto; border: 3px solid #fff; border-radius: 5px;">
        <img style="width: 100%;" :src="imgUrl" alt="Screenshot" />
      </div>
      <button @click="goindex1">再来一次</button>
      <button @click="go">返回首页</button>
    </div>
    <div v-else ref="content" class="content">
      <div style="font-size: 30px;">我用“慧享数字生活”智慧助老仿真系统体验手机预约挂号功能，用时仅{{ passedTime }}秒</div>

      <img  src="@/assets/logo.png" alt="">
      上图表示二维码
      <p style="font-size: 30px;">你也来试试吧</p>
    </div>



    <!-- 显示截图的弹框 -->

  </div>
</template>

<script>

import html2canvas from "html2canvas";

export default {
  name: 'index',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      content: null,
      imgUrl: null,
      passedTime: 0,
      isMobileDevice: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
    };
  },
  created() {
    this.passedTime = localStorage.getItem('seconds')
    this.$nextTick(() => {
      this.getPrintScreen();
    });
  },
  mounted() {


  },

  methods: {
    goindex1() {
      localStorage.removeItem('seconds');
      localStorage.removeItem('startTime');
      localStorage.removeItem('endTime');
      this.$router.push({
        path: "/01/register/index1",
      });
    },
    go() {
      localStorage.removeItem('seconds');
      localStorage.removeItem('startTime');
      localStorage.removeItem('endTime');
      this.$router.push({
        path: "/",
      });
    },
    saveImageLocally() {

      if (this.isMobileDevice) {
        // 提示移动设备用户长按图片保存或分享
        // alert("长按图片保存或分享");
      } else {
        if (this.imgUrl) {
          const link = document.createElement('a');
          link.href = this.imgUrl;
          link.download = 'screenshot.png';
          link.click();
        }
      }

    },
    getPrintScreen() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      console.log(this.$refs.content, 'this.$refs.content');
      html2canvas(this.$refs.content, {
        // width: 30, //截图宽度
        // height: 50, //截图高度
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL("image/png") // toDataURL: 图片格式转成 base64
        console.log('base64图片地址', url)
        this.imgUrl = url
      })
    },


  }
}
</script>

<style scoped lang="less"></style>
